<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <style>
    #my_html {
    position: absolute;
    top: 60px;
    right: 600px;
    bottom: 0px;
    left: 0px;
    }
    #my_control {
    position: absolute;
    top: 52px;
    right: 0px;
    bottom: 0;
    width: 600px;
    padding: 8px;
    overflow:scroll;
    }

    .ace_gutter-cell.ace_breakpoint{ 
        border-radius: 20px 0px 0px 20px; 
        background:#ff5555;
    }

    .errorHighlight{
      position:absolute;
      background-color:rgb(255, 55, 55, 0.2);
    }
    </style>

    <title>Gabuino</title>
  </head>
  <body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#"><img src="gabuino.png" height=32></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Examples
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown" id="_examples">
          <label for="input-file">Specify a file:</label><br>
          <input type="file" id="input-file">
        </div>
      </li>

      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          File
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Save</a>
          <a class="dropdown-item" href="#">Save as...</a>
          <a class="dropdown-item" href="#">Delete</a>
          <a class="dropdown-item" href="#">Download binary</a>
          <div class="dropdown-divider"></div>
          <a><h6 class="dropdown-header">Stored programs</h6></a>
          <a class="dropdown-item" href="#">User program 1</a>
          <a class="dropdown-item" href="#">User program 2</a>
        </div>
      </li>

      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Compiler
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a><h6 class="dropdown-header">Application</h6></a>
          <a id="_downloadElf" class="dropdown-item" href="#">Download binary</a>
          <a id="_downloadAsm" class="dropdown-item" href="#">Show disassembly</a>
          <div class="dropdown-divider"></div>
          <a><h6 class="dropdown-header">Compiler</h6></a>
          <a class="dropdown-item" href="#">http://localhost:8382</a>
          <a class="dropdown-item" href="#">cloud.valky.eu</a>
        </div>
      </li>

      <button class="btn btn-sm btn-outline-secondary mr-2" type="button" id="_connect">Connected</button>
      <a class="navbar-text mr-2" id="_connectText">Device not found</a>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <button class="btn btn-outline-success mr-1 my-2 my-sm-0" type="button" id="_run">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play" viewBox="3 3 12 12">
  <path d="M10.804 8 5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z"/>
</svg>
Run</button>

      <button class="btn btn-outline-success mr-1 my-2 my-sm-0" type="button" id="_stop">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-stop" viewBox="3 3 12 12">
  <path d="M3.5 5A1.5 1.5 0 0 1 5 3.5h6A1.5 1.5 0 0 1 12.5 5v6a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 11V5zM5 4.5a.5.5 0 0 0-.5.5v6a.5.5 0 0 0 .5.5h6a.5.5 0 0 0 .5-.5V5a.5.5 0 0 0-.5-.5H5z"/>
</svg>
Stop</button>
    </form>
  </div>
</nav>

<div id="my_control">

<div class="card">
<article class="card-body">
<h4 class="card-title mb-4 mt-1">Compilation</h4>
  <div class="form-group" id="_compilationText">
  </div>
</article>
</div>

<br>

<div class="card">
<article class="card-body">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="card-title mb-4 mt-1">Console</h4>
        <div>
            <button id="_screenshot" type="button" class="btn btn-outline-success">Screenshot</button>
            <button id="_clear" type="button" class="btn btn-outline-success">Clear</button>
        </div>
    </div>

  <div class="form-group" id="_debugText" style="white-space: pre-wrap; "></div>
</article>
</div>
<br>

<div class="card">
<article class="card-body">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="card-title mb-4 mt-1">Debug</h4>
    <div>
      <!-- add register view/assembly? -->
      <button id="_inspect" type="button" class="btn btn-outline-success">Inspect</button>
      <button id="_resume" type="button" class="btn btn-outline-success">Resume break</button>
    </div>
  </div>

  <div class="row d-none" id="_debugtools">
    <div class="card col-5">
      <b>Variables</b>
      <pre id="variables"></pre>
    </div>

    <div class="card col-7">
      <b>Call stack</b>
      <pre id="callstack"></pre>
    </div>
  </div>
</article>
</div>
</div>

<div id="my_html">
</div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://rawgithub.com/ajaxorg/ace-builds/master/src/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://rawgithub.com/ajaxorg/ace-builds/master/src/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
    <script src="compiler.js"></script>
    <script src="editor.js"></script>
    <script src="serial.js"></script>
    <script src="comm.js"></script>
    <script src="bios.js"></script>
    <script src="binary-parser/context.js"></script>
    <script src="binary-parser/binary_parser.js"></script>
    <script src="parseelf.js"></script>
    <script src="examples.js"></script>
    <script src="debugger.js"></script>
    <script src="breakpoint.js"></script>
    <script src="gui.js"></script>
    <script src="gui_debug.js"></script>
</body>
</html>    
